<template>

<!-- 导入 -->
<!-- <div style="position: absolute; top: 0">
    <input id="uploadBtn" type="file" @change="loadExcel" hidden />
    <button @click="importFile" class="btn btn-danger">导入xlsx文件</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  </div> -->


  <!-- 文件上传和远程加载Excel文件的界面 -->
  <!-- <div style="position: absolute; top: 0">
    <input type="date" v-model=_date @change="queryByDate"/>
  </div> -->
  <!-- Luckysheet的容器，用于渲染Excel -->
  <div id="luckysheet"></div>
  <!-- 下载文件时显示的遮罩层 -->
  <!-- <div v-show="isMaskShow" id="tip">Downloading</div> -->
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { exportExcel } from '../utils/export'

// 导入文件
function importFile() {
  document.getElementById("uploadBtn").click();
}
//导入
const loadExcel = (evt) => {
  const files = evt.target.files
  if (files == null || files.length == 0) {
    return
  }

  let name = files[0].name
  let suffixArr = name.split('.'),
    suffix = suffixArr[suffixArr.length - 1]
  if (suffix != 'xlsx') {
    alert('要求后缀名为：xlsx文件')
    return
  }
  LuckyExcel.transformExcelToLucky(files[0], function (exportJson, luckysheetfile) {
    if (exportJson.sheets == null || exportJson.sheets.length == 0) {
      alert('Failed to read the content of the excel file, currently does not support xls files!')
      return
    }
    console.log('exportJson', exportJson)
    jsonData.value = exportJson

    isFunction(window?.luckysheet?.destroy) && window.luckysheet.destroy()

    window.luckysheet.create({
      container: 'luckysheet', //luckysheet is the container id
      showinfobar: true,//是否显示顶部名称栏
      allowEdit: false,// 只读模式
      data: exportJson.sheets,
      title: exportJson.info.name,
      userInfo: exportJson.info.name.creator,
      lang: 'zh', // 设定表格语言
      functionButton: `<button id="saveButton" onclick="save" class="btn btn-primary" style="padding:3px 6px; font-size: 12px;">保存</button>`,
    })
  })
}


const _date = ref('')

function queryByDate() {
  luckysheet.create({
    gridKey: 1,
    allowEdit: false,
    // showinfobar: false, //是否显示顶部名称栏
     title: '演示Dome', // 设定表格名称
    container: 'luckysheet', // 设定DOM容器的id
    lang: 'zh', // 设定表格语言
    loadUrl: '/api/queryByDate/'+_date.value, // 后端加载数据的URL
    showtoolbarConfig: {
      undoRedo: false, //撤销重做，注意撤消重做是两个按钮，由这一个配置决定显示还是隐藏
      paintFormat: false, //格式刷
      currencyFormat: false, //货币格式
      percentageFormat: false, //百分比格式
      numberDecrease: false, // '减少小数位数'
      numberIncrease: false, // '增加小数位数
      moreFormats: false, // '更多格式'
      font: false, // '字体'
      fontSize: false, // '字号大小'
      bold: false, // '粗体 (Ctrl+B)'
      italic: false, // '斜体 (Ctrl+I)'
      strikethrough: false, // '删除线 (Alt+Shift+5)'
      underline: false, // '下划线 (Alt+Shift+6)'
      textColor: false, // '文本颜色'
      fillColor: false, // '单元格颜色'
      border: false, // '边框'
      mergeCell: false, // '合并单元格'
      horizontalAlignMode: false, // '水平对齐方式'
      verticalAlignMode: false, // '垂直对齐方式'
      textWrapMode: false, // '换行方式'
      textRotateMode: false, // '文本旋转方式'
      image: false, // '插入图片'
      link: false, // '插入链接'
      chart: false, // '图表'（图标隐藏，但是如果配置了chart插件，右击仍然可以新建图表）
      postil: false, //'批注'
      pivotTable: false,  //'数据透视表'
      function: false, // '公式'
      conditionalFormat: false, // '条件格式'
      dataVerification: false, // '数据验证'
      splitColumn: false, // '分列'
      screenshot: false, // '截图'
      findAndReplace: false, // '查找替换'
      protection: false, // '工作表保护'
      print: false, // '打印'
    }, //自定义工具栏
    // loadSheetUrl: '/api/luckysheet/load' ,
    functionButton: `                        <button id="exportFile" class="btn btn-danger" style="padding:3px 6px; font-size: 12px;margin-right: 12px;">导出文件</button>
                        `,
  })
}

// 组件挂载后创建Luckysheet实例
onMounted(() => {
   luckysheet.create({
     gridKey: 1,
     allowEdit: false,
     container: 'luckysheet', // 设定DOM容器的id
     title: '演示Demo', // 设定表格名称
     lang: 'zh', // 设定表格语言
     loadUrl: '/api/luckysheet/load', // 后端加载数据的URL
     showtoolbarConfig: {
      undoRedo: false, //撤销重做，注意撤消重做是两个按钮，由这一个配置决定显示还是隐藏
      paintFormat: false, //格式刷
      currencyFormat: false, //货币格式
      percentageFormat: false, //百分比格式
      numberDecrease: false, // '减少小数位数'
      numberIncrease: false, // '增加小数位数
      moreFormats: false, // '更多格式'
      font: false, // '字体'
      fontSize: false, // '字号大小'
      bold: false, // '粗体 (Ctrl+B)'
      italic: false, // '斜体 (Ctrl+I)'
      strikethrough: false, // '删除线 (Alt+Shift+5)'
      underline: false, // '下划线 (Alt+Shift+6)'
      textColor: false, // '文本颜色'
      fillColor: false, // '单元格颜色'
      border: false, // '边框'
      mergeCell: false, // '合并单元格'
      horizontalAlignMode: false, // '水平对齐方式'
      verticalAlignMode: false, // '垂直对齐方式'
      textWrapMode: false, // '换行方式'
      textRotateMode: false, // '文本旋转方式'
      image: false, // '插入图片'
      link: false, // '插入链接'
      chart: false, // '图表'（图标隐藏，但是如果配置了chart插件，右击仍然可以新建图表）
      postil: false, //'批注'
      pivotTable: false,  //'数据透视表'
      function: false, // '公式'
      conditionalFormat: false, // '条件格式'
      dataVerification: false, // '数据验证'
      splitColumn: false, // '分列'
      screenshot: false, // '截图'
      findAndReplace: false, // '查找替换'
      protection: false, // '工作表保护'
      print: false, // '打印'
    }, //自定义工具栏
     functionButton: `时间查询：<input type="date" id="input_date" v-model=_date @change="queryByDate" style="margin-right: 12px;"/>
     <button class="btn btn-primary" style="padding:3px 6px; font-size: 12px;margin-right: 200px;">查询</button>
     <button id="exportFile" class="btn btn-danger" style="padding:3px 6px; font-size: 12px;margin-right: 12px;">导出文件</button>
                        `,
   })

   // 根据实际进行查询
   $('#luckysheet').on('change', '#input_date', function (e) {
      alert(e.target.value)
    });
     // 导出事件
    $('#luckysheet').on('click', '#exportFile', function (a,b) {
      console.log(a,b)
      // 拿到所有的信息
      exportExcel(luckysheet.getAllSheets(), '下载')
    });
  /*   // 保存事件
    $('#luckysheet').on('click', '#saveButton', function () {
      // 拿到所有的信息
      console.log(window.luckysheet.getAllSheets())
      axios.post("/luckysheet/workbookSave",window.luckysheet.getAllSheets()).then(rep =>{
          console.log(rep)
      }).catch(e =>alert(e))
    }); */

})
</script>

<style scoped>
#luckysheet {
  margin: 0px;
  padding: 0px;
  position: absolute;
  width: 100%;
  left: 0px;
  top: 30px;
  bottom: 0px;
}

/* 文件上传 */
#uploadBtn {
  font-size: 16px;
}

/* 下载遮罩层 */
#tip {
  position: absolute;
  z-index: 1000000;
  left: 0px;
  top: 0px;
  bottom: 0px;
  right: 0px;
  background: rgba(255, 255, 255, 0.8);
  text-align: center;
  font-size: 40px;
  align-items: center;
  justify-content: center;
  display: flex;
}
</style>
